<mat-toolbar color="primary">
    <button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
        <mat-icon>menu</mat-icon>
    </button>
    <!-- <span>{{ title$ | async }}</span> -->
    <span class="example-spacer"></span>

    <button mat-button routerLink="./charts" routerLinkActive="mat-accent">Charts</button>
    <button mat-button routerLink="./covid" routerLinkActive="mat-accent">Covid</button>
    <button mat-button routerLink="./foodmart" routerLinkActive="mat-accent">FoodMart</button>
    <button mat-button routerLink="./query" routerLinkActive="mat-accent">Query</button>
    <button mat-button routerLink="./explorer" routerLinkActive="mat-accent">Explorer</button>
    <button mat-button routerLink="./langchain" routerLinkActive="mat-accent">LangChain</button>
    <button mat-button routerLink="./copilot" routerLinkActive="mat-primary">Copilot</button>

    <span style="flex: 1;"></span>

    <div class="flex items-center gap-2">
        @if(status()) {
            <div>
                <span>{{ status().status }}</span>
                <span *ngIf="status().payload">{{ status().payload | number }} %</span>
            </div>
        }
        
        <button mat-icon-button [matTooltip]="error">
            <mat-icon>support_agent</mat-icon>
        </button>

        <mat-slide-toggle [(ngModel)]="isDark">Dark</mat-slide-toggle>

        <button mat-icon-button (click)="snav.toggle()"><mat-icon>menu</mat-icon></button>
    </div>
</mat-toolbar>

<mat-sidenav-container class="example-sidenav-container"
    [style.marginTop.px]="mobileQuery.matches ? 56 : 0">
    <mat-sidenav #snav [mode]="mobileQuery.matches ? 'over' : 'side'" opened
        [fixedInViewport]="mobileQuery.matches" fixedTopGap="56">
        <ngm-copilot-chat class="h-full w-80"
            [user]="{
                name: '元数信息',
                imageUrl: '/assets/images/logo@3x.png'
            }"
        ></ngm-copilot-chat>
    </mat-sidenav>

    <mat-sidenav-content>
        <div class="app-content" >
        <!-- <div fxLayout="row">
            <ngm-smart-filter [dataSettings]="dataSettings"
                [options]="smartFilterOptions"
                [appearance]="appearance"
                [(ngModel)]="slicer"
                (ngModelChange)="onSlicerChange($event)">
            </ngm-smart-filter>

            <ngm-smart-filter [dataSettings]="dataSettings"
                [options]="productFilterOptions"
                [appearance]="appearance"
                [(ngModel)]="product"
                (ngModelChange)="onSlicerChange($event)">
            </ngm-smart-filter>

            <ngm-smart-filter [dataSettings]="dataSettings"
                [options]="{
                    dimension: departmentDimension,
                    initialLevel: 1,
                    searchable: true
                }"
                [appearance]="appearance"
                [(ngModel)]="department"
                (ngModelChange)="onSlicerChange($event)">
            </ngm-smart-filter>

            <ngm-member-tree [dataSettings]="dataSettings"
                [dimension]="departmentDimension"
                [appearance]="appearance"
            ></ngm-member-tree>

            <ngm-member-table [dataSettings]="dataSettings"
                [dimension]="departmentDimension"
                [appearance]="appearance"
                [(ngModel)]="department"
                (ngModelChange)="onSlicerChange($event)"
            ></ngm-member-table>
        </div> -->

        <!-- <div class="flex flex-wrap gap-1">
            <ngm-member-tree-select
                [dataSettings]="{
                    dataSource: 'FOODMART',
                    entitySet: 'Sales'
                }"
                [dimension]="{
                    dimension: '[Store]',
                    level: '[Store].[Country]'
                }"
                [options]="{
                    label: 'Country',
                    memberSource: MemberSource.CUBE
                }"
                [(ngModel)]="store"
            ></ngm-member-tree-select>
            <ngm-member-tree-select
                label="State"
                [dataSettings]="{
                    dataSource: 'FOODMART',
                    entitySet: 'Sales'
                }"
                [dimension]="{
                    dimension: '[Store]',
                    level: '[Store].[State]'
                }"
                [options]="{
                    label: 'State',
                    memberSource: MemberSource.CUBE
                }"
                [(ngModel)]="store"
            ></ngm-member-tree-select>

            <ngm-smart-filter
                [dataSettings]="{
                    dataSource: 'FOODMART',
                    entitySet: 'Sales'
                }"
                [dimension]="{
                    dimension: '[Store]',
                    level: '[Store].[State]',
                    displayBehaviour: DisplayBehaviour.auto
                }"
                [options]="{
                    label: 'State',
                    memberSource: MemberSource.CUBE,
                    multiple: true
                }"
                [(ngModel)]="store"
            ></ngm-smart-filter>

            <ngm-smart-filter
                [dataSettings]="{
                    dataSource: 'FOODMART',
                    entitySet: 'Sales'
                }"
                [dimension]="{
                    dimension: '[Store]',
                    displayBehaviour: DisplayBehaviour.auto
                }"
                [options]="{
                    label: 'State',
                    memberSource: MemberSource.CUBE,
                    multiple: true
                }"
                [(ngModel)]="store1"
            ></ngm-smart-filter>

            <ngm-smart-select
                [dataSettings]="{
                    dataSource: 'FOODMART',
                    entitySet: 'Sales'
                }"
                [dimension]="{
                    dimension: '[Store]',
                    level: '[Store].[State]'
                }"
                [options]="{
                    label: 'State'
                }"
                [(ngModel)]="store"
            ></ngm-smart-select>
        </div>
-->
            <router-outlet #o="outlet"></router-outlet>
        </div>
    </mat-sidenav-content>
</mat-sidenav-container>
